<script lang="ts" setup>
import { imgUrl } from '../assets/common/Constants';
import { userInfoStore } from '../assets/userStore/userStore';
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import { userApis } from '../assets/apis/UserApis';
import { UserModel } from '../assets/models/User';
import { storeApis } from '../assets/apis/StoreApis';
import { StoreModel } from '../assets/models/Store';
import { messageApis } from '../assets/apis/MessageApis';
import { MessageModel } from '../assets/models/Message';

const router = useRouter();//声明路径变量
const userStore = userInfoStore();
const isAdmin = ref<boolean>()//用户是否具有管理员标识
const hasStore = ref<boolean>(false)//用户是否有店铺标识
const num = ref()
const imageUrl = ref<string>()//用户头像URL

onMounted(() => {
    router.push('/personalinfo')//跳转到用户个人信息页面
    userApis.queryUser(userStore.id)//查询用户信息并更新和存储界面
        .then((value: UserModel) => {
            isAdmin.value = value.is_admin;//更新管理员状态
            userStore.update(value.id, value.username, value.phone, value.head_portrait);
            imageUrl.value = value.head_portrait ? `${value.head_portrait}` : 'src/assets/resource/ic_user_portrait.svg';//设置头像URL
        })

    storeApis.queryStore(userStore.id)//查询用户店铺信息
        .then((value: StoreModel) => {
            if (value) {
                hasStore.value = true;//若存在，更新信息
            }
        })
    messageApis.queryMessageList(userStore.id) // 查询用户消息列表并更新未读消息数量
        .then((value: Array<MessageModel>) => {
            if (value) {
                num.value = value.length//更新未读消息数量
            }
        })
})

const home = () => {
    router.replace('/')
}

const infoClick = () => {
    router.replace('/personalinfo')//跳转到个人首页
}
const menuClick = () => {
    router.replace('/menu')//跳转到菜单页面
}
const myOrderClick = () => {
    router.replace('/myorder')//跳转到订单页面
}
const addTakeoutClick = () => {
    router.replace('/addtakeout')//  跳转到添加外卖页面
}
const myTakeoutsClick = () => {
    router.replace('/mytakeouts')//跳转到我都外卖页面
}
const updateInfoClick = () => {
    router.replace('/updateinfo')//跳转到更信息页面
}
const myAddressClick = () => {
    router.replace('/myaddress')//跳转到添加地址
}

const rechargeClick = () => {
    router.replace('/recharge')//跳转到充值页面
}

const adminApplyStoreClick = () => {
    router.replace('/adminapplystore')// 跳转到管理员店铺申请审核页面
}

const adminApplyTakeoutClick = () => {
    router.replace('/adminapplytakeout')
}

const applyStoreClick = () => {
    router.replace('/applystore')// 跳转到店铺申请页面
}


const myMessageClick = () => {
    router.replace('/mymessages')
}

const myStoreClick = () => {
    router.replace('/myStore')// 跳转到我的店铺页面
}
</script>

<template>
    <el-row class="header_profile" justify="space-between">
        <el-image style="width: auto; height: auto;" :src=imgUrl fit="none" />
    </el-row>
    <el-row style="width: 100%;padding: 2%;" type="flex" justify="space-around">
        <el-col :span="24">
            <el-breadcrumb separator="/" style="padding: 1%;">
                <el-breadcrumb-item @click="home">首页</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        <el-col class="sider" :span="5">
            <el-col style="margin-top: 10%;" align="middle" :span="24">
                <el-image class="imgInfo" :src="imageUrl" />
            </el-col>
            <el-col style="margin-top: 2%;" align="middle" :span="24">
                <el-text class="font_main">{{ userStore.username }}</el-text>
            </el-col>
            <el-col style="margin-top: 2%;" align="middle" :span="24">
                <el-text class="font_common">UID：{{ userStore.id }}</el-text>
            </el-col>
            <el-col style="margin-top: 10%; " :span="24">
                <el-menu>
                    <el-sub-menu index="1" style="color: #fbaf5a;">
                        <template #title>
                            <span style="color: #fbaf5a;">个人设置</span>
                        </template>
                        <el-menu-item-group style="color: #fbaf5a;">
                            <el-menu-item index="1-1" @click="infoClick" style="color: #fbaf5a;">
                                <span>基本信息</span>
                            </el-menu-item>
                            <el-menu-item index="1-2" @click="updateInfoClick" style="color: #fbaf5a;">
                                <span>更新信息</span>
                            </el-menu-item>
                            <el-menu-item index="1-3" @click="myAddressClick" style="color: #fbaf5a;">
                                <span>添加地址</span>
                            </el-menu-item>
                            <el-menu-item index="1-3" @click="rechargeClick" style="color: #fbaf5a;">
                                <span>账户充值</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-menu-item index="2" @click="myOrderClick" style="color: #fbaf5a;">
                        <span>订单</span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="menuClick" style="color: #fbaf5a;">
                        <span>菜单</span>
                    </el-menu-item>
                    <el-sub-menu index="4" style="color: #fbaf5a;">
                        <template #title>
                            <span style="color: #fbaf5a;">我的店铺</span>
                        </template>
                        <el-menu-item-group style="color: #fbaf5a;">
                            <el-menu-item index="4-1" @click="applyStoreClick" style="color: #fbaf5a;"
                                v-show="!hasStore">
                                <span>店铺申请</span>
                            </el-menu-item>
                            <el-menu-item index="4-2" @click="myTakeoutsClick" style="color: #fbaf5a;"
                                v-show="hasStore">
                                <span>管理店铺</span>
                            </el-menu-item>
                            <el-menu-item index="4-3" @click="myStoreClick" style="color: #fbaf5a;" v-show="hasStore">
                                <span>店铺信息</span>
                            </el-menu-item>
                            <el-menu-item index="4-4" @click="addTakeoutClick" style="color: #fbaf5a;"
                                v-show="hasStore">
                                <span>添加商品</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-menu-item index="5" @click="myMessageClick" style="color: #fbaf5a;">
                        <el-badge :value="num" :max="10" :offset="[20, 27]" :show-zero="false">
                            <span>我的消息</span>
                        </el-badge>
                    </el-menu-item>
                    <el-sub-menu v-show="isAdmin" index="6" style="color: #fbaf5a;">
                        <template #title>
                            <span style="color: #fbaf5a;">管理员</span>
                        </template>
                        <el-menu-item-group style="color: #fbaf5a;">
                            <el-menu-item index="6-1" @click="adminApplyStoreClick" style="color: #fbaf5a;">
                                <span>店铺申请审核</span>
                            </el-menu-item>
                            <el-menu-item index="6-2" @click="adminApplyTakeoutClick" style="color: #fbaf5a;">
                                <span>商品上架审核</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </el-menu>
            </el-col>
        </el-col>
        <el-col :span="18" style="height: 100%;overflow-x: hidden;overflow-y: hidden;">
            <router-view />
        </el-col>
    </el-row>

</template>
<style>
.sider {
    border-radius: 15px;
    box-shadow: 0px 0px 1px 1px #fbaf5a;
}

.header_profile {
    width: 100%;
    height: 90px;
    background-color: #fbaf5a;
    padding: 20px;
}

.imgInfo {
    border-radius: 50%;
    width: 45%;
    border-color: white;
    border-width: 10px;
    border-style: solid;
}
</style>

